import React, { useState } from 'react'
import { motion } from 'framer-motion'
import { Heart, MessageCircle, Share2, Download, Play, Star, Filter, Search, Plus, Users, TrendingUp, Award, Calendar, Eye, Camera, MapPin } from 'lucide-react'

const CommunityPage = () => {
  const [activeTab, setActiveTab] = useState('trending')
  const [searchQuery, setSearchQuery] = useState('')

  const tabs = [
    { id: 'trending', name: '热门', icon: TrendingUp },
    { id: 'latest', name: '最新', icon: Calendar },
    { id: 'creations', name: '创作', icon: Star },
    { id: 'theater-vision', name: '剧场视野', icon: Camera },
    { id: 'challenges', name: '挑战', icon: Award }
  ]

  const posts = [
    {
      id: 1,
      user: {
        name: '京剧小仙女',
        avatar: '👩',
        verified: true
      },
      title: '用AI创作了一首现代版《贵妃醉酒》',
      content: '融合了电子音乐元素，保留了传统京剧的韵味，大家觉得怎么样？',
      image: '🎵',
      likes: 128,
      comments: 23,
      shares: 15,
      time: '2小时前',
      tags: ['AI京歌', '现代融合', '贵妃醉酒'],
      type: 'creation'
    },
    {
      id: 2,
      user: {
        name: '国潮设计师',
        avatar: '🎨',
        verified: true
      },
      title: '京剧脸谱的现代设计挑战',
      content: '挑战：用现代设计语言重新诠释传统京剧脸谱，欢迎参与！',
      image: '🎭',
      likes: 89,
      comments: 34,
      shares: 28,
      time: '4小时前',
      tags: ['设计挑战', '京剧脸谱', '现代设计'],
      type: 'challenge'
    },
    {
      id: 3,
      user: {
        name: '音乐制作人',
        avatar: '🎼',
        verified: false
      },
      title: '分享：京剧与摇滚的完美融合',
      content: '尝试将京剧唱腔与摇滚乐结合，效果出乎意料的好！',
      image: '🎸',
      likes: 156,
      comments: 41,
      shares: 32,
      time: '6小时前',
      tags: ['摇滚京剧', '音乐融合', '创新'],
      type: 'creation'
    },
    {
      id: 4,
      user: {
        name: '传统文化爱好者',
        avatar: '📚',
        verified: true
      },
      title: '京剧知识科普',
      content: '为大家科普一下京剧的四大行当和表演特点，希望对新手有帮助！',
      image: '📖',
      likes: 203,
      comments: 67,
      shares: 45,
      time: '1天前',
      tags: ['知识科普', '京剧基础', '传统文化'],
      type: 'education'
    }
  ]

  const challenges = [
    {
      id: 1,
      title: 'AI京歌创作大赛',
      description: '用AI创作最具创意的京歌作品',
      prize: '1000元奖金',
      participants: 156,
      deadline: '7天',
      image: '🏆',
      color: 'from-jing-red to-jing-gold'
    },
    {
      id: 2,
      title: '京剧脸谱设计挑战',
      description: '设计现代风格的京剧脸谱',
      prize: '设计工具套装',
      participants: 89,
      deadline: '5天',
      image: '🎨',
      color: 'from-jing-purple to-jing-pink'
    },
    {
      id: 3,
      title: '情景互动体验分享',
      description: '分享最有趣的京剧互动体验',
      prize: 'VR设备',
      participants: 67,
      deadline: '3天',
      image: '🥽',
      color: 'from-jing-blue to-jing-purple'
    }
  ]

  const users = [
    { name: '京剧大师', avatar: '👨‍🎭', followers: '12.5K', verified: true },
    { name: 'AI音乐人', avatar: '🤖', followers: '8.9K', verified: true },
    { name: '国潮设计师', avatar: '🎨', followers: '6.2K', verified: false },
    { name: '传统文化', avatar: '📚', followers: '15.3K', verified: true }
  ]

  return (
    <div className="min-h-screen pt-16 theme-community">
      <div className="max-w-7xl mx-auto px-4 py-8">
        {/* Header */}
        <motion.div
          className="text-center mb-16"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
        >
          <motion.div
            className="mb-8"
            initial={{ scale: 0.9, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            transition={{ duration: 0.8, delay: 0.2 }}
          >
            <h1 className="text-6xl md:text-7xl font-bold jing-text-gradient mb-6 jing-title text-shadow-xl">
              国潮UI社区
            </h1>
            <div className="w-32 h-1 jing-gradient mx-auto mb-6 rounded-full"></div>
          </motion.div>
          
          <motion.p 
            className="text-xl md:text-2xl text-white/80 max-w-4xl mx-auto leading-relaxed jing-content"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.4 }}
          >
            👥 与志同道合的朋友分享创作，探索国潮文化的无限可能
            <br />
            🎨 在这里，传统与现代碰撞，创意与文化交融，共同创造属于这个时代的文化符号
          </motion.p>
          
          {/* 装饰性元素 */}
          <motion.div
            className="flex justify-center items-center space-x-6 mt-8"
            initial={{ opacity: 0, scale: 0.5 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.8, delay: 0.6 }}
          >
            <div className="text-3xl animate-float">🎨</div>
            <div className="text-3xl animate-bounce-slow">💡</div>
            <div className="text-3xl animate-float animation-delay-400">🌟</div>
            <div className="text-3xl animate-bounce-slow animation-delay-600">🚀</div>
          </motion.div>
        </motion.div>

        <div className="grid lg:grid-cols-4 gap-8">
          {/* 主要内容区域 */}
          <div className="lg:col-span-3 space-y-6">
            {/* 搜索和筛选 */}
            <motion.div
              className="jing-card"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.2 }}
            >
              <div className="flex flex-col md:flex-row gap-4">
                <div className="flex-1 relative">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/60" size={20} />
                  <input
                    type="text"
                    placeholder="搜索创作、用户、话题..."
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="jing-input w-full pl-10"
                  />
                </div>
                <button className="flex items-center space-x-2 jing-button">
                  <Filter size={18} />
                  <span>筛选</span>
                </button>
                <button className="flex items-center space-x-2 glass-effect px-4 py-3 rounded-lg text-white hover:bg-white/20 transition-all">
                  <Plus size={18} />
                  <span>发布</span>
                </button>
              </div>
            </motion.div>

            {/* 标签页 */}
            <motion.div
              className="jing-card"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.3 }}
            >
              <div className="flex space-x-1 bg-white/10 p-1 rounded-lg">
                {tabs.map((tab) => {
                  const Icon = tab.icon
                  return (
                    <button
                      key={tab.id}
                      onClick={() => setActiveTab(tab.id)}
                      className={`flex-1 flex items-center justify-center space-x-2 py-3 px-4 rounded-lg transition-all duration-300 ${
                        activeTab === tab.id
                          ? 'bg-jing-red text-white'
                          : 'text-white/70 hover:text-white hover:bg-white/10'
                      }`}
                    >
                      <Icon size={18} />
                      <span>{tab.name}</span>
                    </button>
                  )
                })}
              </div>
            </motion.div>

            {/* 剧场视野特色展示 */}
            {activeTab === 'theater-vision' && (
              <motion.div
                className="jing-card mb-8"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6 }}
              >
                <div className="text-center mb-8">
                  <h2 className="text-3xl font-bold jing-text-gradient mb-4">🎭 剧场视野</h2>
                  <p className="text-jing-white/80 text-lg">
                    真实座位视角，让每一次观演都成为完美体验
                  </p>
                </div>

                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                  {[
                    {
                      theater: '国家大剧院',
                      seat: '一层池座 第3排 15号',
                      rating: 5,
                      user: '京剧爱好者小王',
                      image: '📸',
                      tags: ['视野极佳', '音响震撼', '推荐'],
                      views: 156,
                      likes: 89
                    },
                    {
                      theater: '梅兰芳大剧院',
                      seat: '二层楼座 第2排 8号',
                      rating: 4,
                      user: '传统文化传承者',
                      image: '📸',
                      tags: ['全景视野', '性价比高'],
                      views: 234,
                      likes: 67
                    },
                    {
                      theater: '长安大戏院',
                      seat: '一层池座 第1排 5号',
                      rating: 5,
                      user: '国潮设计师',
                      image: '📸',
                      tags: ['最佳位置', '演员表情清晰'],
                      views: 189,
                      likes: 123
                    }
                  ].map((vision, index) => (
                    <motion.div
                      key={index}
                      className="glass-effect rounded-xl overflow-hidden group cursor-pointer"
                      initial={{ opacity: 0, y: 20 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ duration: 0.6, delay: index * 0.1 }}
                      whileHover={{ y: -5 }}
                    >
                      {/* 视野图片 */}
                      <div className="relative h-48 bg-gradient-to-br from-zhu-hong/20 to-shi-qing/20">
                        <div className="absolute inset-0 flex items-center justify-center">
                          <div className="text-6xl opacity-50">{vision.image}</div>
                        </div>
                        <div className="absolute top-4 right-4 bg-mo-hei/80 text-jing-white px-2 py-1 rounded-full text-sm">
                          {vision.seat.split(' ')[0]}
                        </div>
                        <div className="absolute bottom-4 left-4 bg-zhu-hong/80 text-jing-white px-2 py-1 rounded-full text-sm">
                          ⭐ {vision.rating}
                        </div>
                      </div>

                      {/* 视野信息 */}
                      <div className="p-4">
                        <div className="mb-3">
                          <h3 className="text-lg font-bold text-jing-white mb-1">
                            {vision.theater}
                          </h3>
                          <p className="text-jing-white/70 text-sm">{vision.seat}</p>
                        </div>

                        <div className="flex flex-wrap gap-1 mb-3">
                          {vision.tags.map((tag, idx) => (
                            <span key={idx} className="px-2 py-1 bg-zhu-hong/20 text-zhu-hong rounded-full text-xs">
                              {tag}
                            </span>
                          ))}
                        </div>

                        <div className="flex items-center justify-between text-sm text-jing-white/60">
                          <span>by {vision.user}</span>
                          <div className="flex items-center space-x-3">
                            <span className="flex items-center space-x-1">
                              <Eye size={14} />
                              <span>{vision.views}</span>
                            </span>
                            <span className="flex items-center space-x-1">
                              <Heart size={14} />
                              <span>{vision.likes}</span>
                            </span>
                          </div>
                        </div>
                      </div>
                    </motion.div>
                  ))}
                </div>

                <div className="text-center mt-8">
                  <button className="jing-button flex items-center space-x-2 mx-auto">
                    <Camera size={18} />
                    <span>上传我的剧场视野</span>
                  </button>
                </div>
              </motion.div>
            )}

            {/* 内容列表 */}
            <div className="space-y-6">
              {posts.map((post, index) => (
                <motion.div
                  key={post.id}
                  className="jing-card"
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: 0.4 + index * 0.1 }}
                >
                  {/* 用户信息 */}
                  <div className="flex items-center space-x-3 mb-4">
                    <div className="w-12 h-12 jing-gradient rounded-full flex items-center justify-center text-2xl">
                      {post.user.avatar}
                    </div>
                    <div className="flex-1">
                      <div className="flex items-center space-x-2">
                        <h3 className="text-white font-semibold">{post.user.name}</h3>
                        {post.user.verified && (
                          <div className="w-5 h-5 bg-jing-gold rounded-full flex items-center justify-center">
                            <Star size={12} className="text-white" />
                          </div>
                        )}
                      </div>
                      <p className="text-white/60 text-sm">{post.time}</p>
                    </div>
                  </div>

                  {/* 内容 */}
                  <div className="mb-4">
                    <h4 className="text-xl font-bold text-white mb-2">{post.title}</h4>
                    <p className="text-white/80 mb-4">{post.content}</p>
                    
                    {/* 内容展示 */}
                    <div className="mb-4">
                      <div className="w-full h-48 jing-gradient rounded-xl flex items-center justify-center text-6xl">
                        {post.image}
                      </div>
                    </div>

                    {/* 标签 */}
                    <div className="flex flex-wrap gap-2 mb-4">
                      {post.tags.map((tag, tagIndex) => (
                        <span
                          key={tagIndex}
                          className="px-3 py-1 bg-jing-red/20 text-jing-red rounded-full text-sm"
                        >
                          #{tag}
                        </span>
                      ))}
                    </div>
                  </div>

                  {/* 互动按钮 */}
                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-6">
                      <button className="flex items-center space-x-2 text-white/70 hover:text-jing-red transition-colors">
                        <Heart size={18} />
                        <span>{post.likes}</span>
                      </button>
                      <button className="flex items-center space-x-2 text-white/70 hover:text-jing-gold transition-colors">
                        <MessageCircle size={18} />
                        <span>{post.comments}</span>
                      </button>
                      <button className="flex items-center space-x-2 text-white/70 hover:text-jing-purple transition-colors">
                        <Share2 size={18} />
                        <span>{post.shares}</span>
                      </button>
                    </div>
                    <div className="flex items-center space-x-2">
                      <button className="p-2 glass-effect rounded-lg hover:bg-white/20 transition-all">
                        <Download size={16} className="text-white" />
                      </button>
                      <button className="p-2 glass-effect rounded-lg hover:bg-white/20 transition-all">
                        <Play size={16} className="text-white" />
                      </button>
                    </div>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>

          {/* 侧边栏 */}
          <motion.div
            className="space-y-6"
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
          >
            {/* 热门挑战 */}
            <div className="jing-card">
              <h3 className="text-xl font-bold text-white mb-4">热门挑战</h3>
              <div className="space-y-4">
                {challenges.map((challenge) => (
                  <div key={challenge.id} className="p-4 glass-effect rounded-lg hover:bg-white/10 transition-all cursor-pointer">
                    <div className="flex items-center space-x-3 mb-3">
                      <div className={`w-10 h-10 bg-gradient-to-r ${challenge.color} rounded-lg flex items-center justify-center text-xl`}>
                        {challenge.image}
                      </div>
                      <div className="flex-1">
                        <h4 className="text-white font-semibold text-sm">{challenge.title}</h4>
                        <p className="text-white/60 text-xs">{challenge.prize}</p>
                      </div>
                    </div>
                    <p className="text-white/70 text-sm mb-3">{challenge.description}</p>
                    <div className="flex items-center justify-between text-xs text-white/60">
                      <span>{challenge.participants} 人参与</span>
                      <span>剩余 {challenge.deadline}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* 推荐用户 */}
            <div className="jing-card">
              <h3 className="text-xl font-bold text-white mb-4">推荐关注</h3>
              <div className="space-y-3">
                {users.map((user, index) => (
                  <div key={index} className="flex items-center space-x-3 p-3 glass-effect rounded-lg hover:bg-white/10 transition-all cursor-pointer">
                    <div className="w-10 h-10 jing-gradient rounded-full flex items-center justify-center text-lg">
                      {user.avatar}
                    </div>
                    <div className="flex-1">
                      <div className="flex items-center space-x-2">
                        <h4 className="text-white font-medium text-sm">{user.name}</h4>
                        {user.verified && (
                          <div className="w-4 h-4 bg-jing-gold rounded-full flex items-center justify-center">
                            <Star size={10} className="text-white" />
                          </div>
                        )}
                      </div>
                      <p className="text-white/60 text-xs">{user.followers} 粉丝</p>
                    </div>
                    <button className="px-3 py-1 bg-jing-red/20 text-jing-red rounded-lg text-xs hover:bg-jing-red/30 transition-all">
                      关注
                    </button>
                  </div>
                ))}
              </div>
            </div>

            {/* 社区统计 */}
            <div className="jing-card">
              <h3 className="text-xl font-bold text-white mb-4">社区统计</h3>
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <span className="text-white/70">总用户数</span>
                  <span className="text-white font-semibold">12,456</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-white/70">今日活跃</span>
                  <span className="text-white font-semibold">3,234</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-white/70">创作作品</span>
                  <span className="text-white font-semibold">8,901</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-white/70">互动次数</span>
                  <span className="text-white font-semibold">45,678</span>
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </div>
  )
}

export default CommunityPage

